<template>
  <div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>
                <i class="el-icon-s-shop"></i> 店铺管理
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="container">
        <div class="handle-box">
            <el-button
                type="primary"
                icon="el-icon-circle-plus"
                class="handle-del mr10"
                @click="addVisible = true"
            >新增店铺</el-button>
            <el-table
            :data="shops"
            border
            style="width:auto;margin-top:28px;">
                <el-table-column
                prop="storeId"
                label="店铺ID"
                width="180">
                </el-table-column>
                <el-table-column
                prop="storeName"
                label="店铺名字"
                width="180">
                </el-table-column>
                <el-table-column
                prop="storeLatitude"
                label="店铺位置经度"
                width="180">
                </el-table-column>
                <el-table-column
                prop="storeLongitude"
                label="店铺位置纬度"
                width="180">
                </el-table-column>
                <el-table-column
                prop="storeContent"
                label="店铺描述"
                width="180">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="showUpdate(scope.$index, scope.row)"
                        >更新</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="del(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!-- 添加弹出框 -->
    <el-dialog title="添加" :visible.sync="addVisible" width="50%">
        <el-form ref="form" :model="addForm" label-width="100px">
            <el-form-item label="店铺名字">
                <el-input v-model="addForm.storeName"></el-input>
            </el-form-item>
            <el-form-item label="店铺描述">
                <el-input v-model="addForm.storeContent"></el-input>
            </el-form-item>
            <baidu-map class="map" :center="center" :zoom="zoom" @click="getAddLocation" :scroll-wheel-zoom='true'></baidu-map>
            <el-form-item label="店铺经度" style="margin-top:18px">
                <el-input v-model="addForm.storeLongitude"></el-input>
            </el-form-item>
            <el-form-item label="店铺纬度">
                <el-input v-model="addForm.storeLatitude"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">添 加</el-button>
        </span>
    </el-dialog>

    <!-- 更新弹出框 -->
    <el-dialog title="更新" :visible.sync="updateVisible" width="30%">
        <el-form ref="form" :model="updateForm" label-width="70px">
            <el-form-item label="店铺名字">
                <el-input v-model="updateForm.storeName"></el-input>
            </el-form-item>
            <el-form-item label="店铺描述">
                <el-input v-model="updateForm.storeContent"></el-input>
            </el-form-item>
            <baidu-map class="map" :center="center" :zoom="zoom" @click="getUpdateLocation" :scroll-wheel-zoom='true'></baidu-map>
            <el-form-item label="店铺经度" style="margin-top:18px">
                <el-input v-model="updateForm.storeLongitude"></el-input>
            </el-form-item>
            <el-form-item label="店铺纬度">
                <el-input v-model="updateForm.storeLatitude"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">更 新</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
import {getShops,delShop,updateShop,addShop} from '@/api'

export default {
    data(){
        return {
            shops: [],
            addVisible: false,
            addForm: {storeLongitude: '', storeLatitude: ''},
            updateForm: {storeLongitude: '',storeLatitude: ''},
            updateVisible: false,
            center: {lng: 109.45744048529967, lat: 36.49771311230842},
            zoom: 13,
        }
    },
    methods:{
        getAddLocation(e){
            this.addForm.storeLongitude = e.point.lng
            this.addForm.storeLatitude = e.point.lat
        },
        getUpdateLocation(e){
            this.updateForm.storeLongitude = e.point.lng
            this.updateForm.storeLatitude = e.point.lat
        },
        getShops(){
            getShops().then(res => {
                this.shops = res.data
            })
        },
        showUpdate (index, row) {
            this.idx = index
            this.updateForm = row
            this.updateVisible = true
        },
        add(){
            let fromData = new FormData()
            fromData.append('storeName', this.addForm.storeName)
            fromData.append('storeLatitude', this.addForm.storeLatitude)
            fromData.append('storeLongitude', this.addForm.storeLongitude)
            fromData.append('storeContent', this.addForm.storeContent)
            addShop(fromData).then(res => {
                if (res.code === 0) {
                    this.addVisible = false
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    })
                    this.getShops()
                } else {
                    this.$message({
                        type: 'error',
                        message: '添加失败'
                    })
                }
            })
        },
        update(){
            let fromData = new FormData()
            fromData.append('storeId', this.shops[this.idx].storeId)
            fromData.append('storeName', this.updateForm.storeName)
            fromData.append('storeLatitude', this.updateForm.storeLatitude)
            fromData.append('storeLongitude', this.updateForm.storeLongitude)
            fromData.append('storeContent', this.updateForm.storeContent)
            updateShop(fromData).then(res => {
                if (res.code === 0) {
                    this.updateVisible = false
                    this.$message({
                        type: 'success',
                        message: '更新成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '更新失败'
                    })
                }
            })
        },
        del(index,row){
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                let fromData = new FormData()
                fromData.append('id', this.shops[index].storeId)
                delShop(fromData).then(res => {
                    if (res.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        this.shops.splice(index, 1)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        })
                    }
                })
                
            })
            .catch(() => {});
        }
    },
    mounted(){
        this.getShops()
    }
}
</script>

<style>
.red{
    color: red;
}
.map {
  width: 100%;
  height: 300px;
}
</style>